<template>
  <table
    id="flight-order-list"
    class="table table-sm table-striped table-hover"
  >
    <thead>
      <tr>
        <th>订单号</th>
        <th>客户</th>
        <th>编码</th>
        <th>乘机人</th>
        <th colspan="5" class="bg-info text-center text-white">行程</th>
        <th>操作员</th>
        <th>行程单?</th>
        <th>订单日期</th>
        <th class="text-end">金额</th>
        <th class="text-end">成本</th>
        <th class="text-end">利润</th>
        <th>订单状态</th>
        <th>使用情况</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="info in dataList">
        <tr
          :key="info.id"
          style="color: black"
        >
          <td>
            {{ info.orderNo }}
            <span class="text-danger" v-if="info.gpTicket === 1">GP</span>
            <span class="text-danger" v-if="info.intlTicket === 1"
              ><br />国际</span
            >
          </td>
          <td>
            {{ showCustomerName(info) }}
            <template v-if="info.customer !== null">
              <br />
              <span class="text-danger small">{{
                info.customer.customerCode
              }}</span>
            </template>
          </td>
          <td>
            {{ info.pnrNo }}
            <span class="text-danger" title="大客户代码"
              ><strong>{{ info.keyCustomerNo }}</strong></span
            >
          </td>
          <td>
            <template v-for="(psg, index) in info.passengers">
              <span :key="psg.id" v-if="index < 2">
                {{ psg.name }}
                <small v-if="isChild(psg.psgType)" class="text-danger small"
                  >儿童</small
                >
                <span class="text-danger" v-if="psg.vipLevel > 0"
                  >VIP{{ psg.vipLevel }}</span
                >
                <br />
              </span>
              <span
                v-else-if="index === 2 && index < info.passengers.length"
                :key="`psg_more` + index"
                >......</span
              >
            </template>
          </td>
          <td colspan="5">
            <table
              class="table table-sm table-borderless"
              style="background-color: transparent"
            >
              <tbody>
                <tr :key="flt.id" v-for="flt in info.flights">
                  <td class="m-0 p-0" width="30%">
                    {{ flt.dport }} {{ flt.dportName }}
                  </td>
                  <td class="m-0 p-0" width="30%">
                    {{ flt.aport }} {{ flt.aportName }}
                  </td>
                  <td class="my-0 py-0" width="20%">{{ flt.ddate }}</td>
                  <td class="my-0 py-0" width="15%">{{ flt.flightNo }}</td>
                  <td class="my-0 py-0" width="5%">{{ flt.subclass }}</td>
                </tr>
              </tbody>
            </table>
          </td>

          <td>{{ info.operator }}</td>
          <td>
            <span
              :class="{
                'text-danger':
                  info.itineraryType !== 0 && info.itineraryMailingStatus === 0,
              }"
            >
              {{ getItineraryTypeDesc(info.itineraryType) }}
            </span>
          </td>
          <td>
            {{ info.createDate.substring(5) }}
          </td>
          <td class="text-end">{{ info.totalAmount }}</td>
          <td class="text-end">{{ info.totalCost }}</td>
          <td class="text-end">{{ info.profit }}</td>
          <td>
            {{ getStatusDesc(info.status) }}

            <template v-if="info.status !== 32">
              <span
                class="text-danger small"
                v-if="info.priceCheckedStatus === 0 && info.intlTicket === 1"
                >待验价</span
              >
            </template>

            <span class="text-info small" v-if="info.payStatus === 1"
              >已收</span
            >
            <span class="text-primary small" v-else-if="info.payStatus === 2"
              >已销</span
            >
          </td>
          <td>{{ info.showStatusDesc }}</td>
          <td class="text-start fa-2">
            <router-link :to="`/flt/order/` + info.id"
              ><i class="mdi mdi-arrow-right"></i
            ></router-link>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
import { PSG_CHD } from "@/common/const.js";
import {
  showFlightOrderStatus,
  showPayType,
  showItineraryType,
} from "@/common/common.js";
import { showCustomerName } from "@/common/common.js";

export default {
  props: {
    dataList: {
      type: Array,
    },
  },
  methods: {
    getStatusDesc: function (status) {
      return showFlightOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    getItineraryTypeDesc: function (itineraryType) {
      return showItineraryType(itineraryType);
    },
    showDetail: function (id) {
      this.$router.push("/flt/order/" + id);
    },
    showCustomerName: function (info) {
      return showCustomerName(info, 0);
    },
    isChild: function (psgType) {
      return psgType === PSG_CHD;
    },
  },
};
</script>
